<style scoped lang="scss">

</style>


<template>
  <div>
    <div class="tools-div" >
      <el-button type="success" icon="el-icon-plus" size="mini" @click="add(null)">
        添加
      </el-button>
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" >
        <el-form ref="dataForm" :model="menuObject" label-width="150px" size="small" style="padding-right: 40px;">
          <el-form-item label="上级部门" v-if="menuObject.id === ''">
            <el-input v-model="menuObject.parentName" disabled="true"/>
          </el-form-item>
          <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="menuObject.type" :disabled="typeDisabled">
              <el-radio :label="0" :disabled="type0Disabled">目录</el-radio>
              <el-radio :label="1" :disabled="type1Disabled">菜单</el-radio>
              <el-radio :label="2" :disabled="type2Disabled">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="menuObject.name"/>
          </el-form-item>
          <el-form-item label="图标" prop="icon" v-if="menuObject.type !== 2">
            <el-select v-model="menuObject.icon" clearable>
              <el-option v-for="item in iconList" :key="item.class" :label="item.class" :value="item.class">
            <span style="float: left;">
            <i :class="item.class"></i>  <!-- 如果动态显示图标，这里添加判断 -->
            </span>
                <span style="padding-left: 6px;">{{ item.class }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number v-model="menuObject.sortValue" controls-position="right" :min="0" />
          </el-form-item>
          <el-form-item prop="path">
            <span slot="label">
                <el-tooltip content="访问的路由地址，如：`sysUser`" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                路由地址
            </span>
            <el-input v-model="menuObject.path" placeholder="请输入路由地址" />
          </el-form-item>
          <el-form-item prop="component" v-if="menuObject.type !== 0">
            <span slot="label">
                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                组件路径
            </span>
            <el-input v-model="menuObject.component" placeholder="请输入组件路径" />
          </el-form-item>
          <el-form-item v-if="menuObject.type === 2">
            <el-input v-model="menuObject.perms" placeholder="请输入权限标识" maxlength="100" />
            <span slot="label">
                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(hasAuthority('bnt.sysRole.list'))" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                权限字符
            </span>
          </el-form-item>
          <el-form-item label="状态" prop="type">
            <el-radio-group v-model="menuObject.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
    </span>
      </el-dialog>
    </div>
    <div>
      <el-table
        :data="menulist"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="菜单名称" sortable width="180"/>
        <el-table-column prop="icon" label="图标" sortable width="180"/>
        <el-table-column prop="component" label="权限标识"/>
        <el-table-column prop="perms" label="权限标识"/>
        <el-table-column prop="path" label="路由名称"/>
        <el-table-column prop="component" label="组件路径"/>
        <el-table-column prop="component" label="组件路径">
        </el-table-column>
        <el-table-column prop="sortValue" label="排序"/>
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status===1"
              @change="switchStatus(scope.row)"
            >

            </el-switch>

          </template>
        </el-table-column>
        <el-table-column
          prop="createTime" label="创建时间"/>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button title="添加" type="success" icon="el-icon-plus" size="mini" @click="add(scope.row)" ></el-button>
            <el-button title="修改" type="primary" icon="el-icon-edit" size="mini" @click="add(scope.row)" ></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除" :disabled="scope.row.children.length > 0"/>
          </template>
        </el-table-column>
      </el-table>


    </div>
  </div>

</template>

<script lang="js">
import api from '@/api/menu/menu'

/*
const defaultForm = {
  id: '',
  parentId: '',
  name: '',
  type: 0,
  path: '',
  component: '',
  perms: '',
  icon: '',
  sortValue: 1,
  status: 1
}

 */
export default {

  data(){
    return{
      menulist:[],
      total:0,
      page:1,
      limit:3,
      searchObj:{},
      dialogVisible:false,
      menuObject:{},
      selectValueData:[],
                              // sysMenu:defaultForm,
      typeDisabled: false,
      type0Disabled: false,
      type1Disabled: false,
      type2Disabled: false,
      dialogTitle:{},
      iconList: [
        {
          class: "el-icon-s-tools",
        },
        {
          class: "el-icon-s-custom",
        },
        {
          class: "el-icon-setting",
        },
        {
          class: "el-icon-user-solid",
        },
        {
          class: "el-icon-s-help",
        },
        {
          class: "el-icon-phone",
        },
        {
          class: "el-icon-s-unfold",
        },
        {
          class: "el-icon-s-operation",
        },
        {
          class: "el-icon-more-outline",
        },
        {
          class: "el-icon-s-check",
        },
        {
          class: "el-icon-tickets",
        },
        {
          class: "el-icon-s-goods",
        },
        {
          class: "el-icon-document-remove",
        },
        {
          class: "el-icon-warning",
        },
        {
          class: "el-icon-warning-outline",
        },
        {
          class: "el-icon-question",
        },
        {
          class: "el-icon-info",
        }
      ]

    }
  },
  created(){
    this.fetchData()
  },
  methods:{
    fetchData(){
      api.findNode(this.searchObj).then(response=>{
        this.menulist=response.data
      })
    },
    add(row){
      this.dialogVisible=true
      this.typeDisabled = false
      this.dialogTitle = '添加下级节点'
      if (row!=null){
        this.menuObject=row
        if(this.menuObject.type === 0) {
          this.menuObject.type = 1
          this.typeDisabled = false
          this.type0Disabled = false
          this.type1Disabled = false
          this.type2Disabled = true
        } else if(this.menuObject.type === 1) {
          this.menuObject.type = 2
          this.typeDisabled = true
        }
      }else{
        this.menuObject={}
        this.dialogTitle = '添加目录节点'
        this.menuObject.type = 0
        this.menuObject.component = 'Layout'
        this.menuObject.parentId = 0
        this.typeDisabled = true
      }
      console.log(this.menuObject)



    },
    addMenu(){
      api.addMenu(this.menuObject).then(()=>{
        this.$message({
          type:'success',
          message:'添加成功'
        })
        this.dialogVisible=false
        this.fetchData()
      });
    },
    updateMenu(){
      api.updateMenu(this.menuObject).then(()=>{
        this.$message({
          type:'success',
          message:'修改成功'
        })
        this.dialogVisible=false
        this.fetchData()

      });
    },
    saveOrUpdate() {
      if(this.menuObject.type === 0 && this.menuObject.parentId !== 0) {
        this.menuObject.component = 'ParentView'
      }
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.saveBtnDisabled = true // 防止表单重复提交
          if (!this.menuObject.id) {
            this.addMenu()
          } else {
            this.updateMenu()
          }
        }
      })
      this.fetchData()

    },
    removeDataById(id){
      api.removeMenu(id).then(()=>{
        this.$message({
          type:'danger',
          message:'删除成功'
        })
        this.dialogVisible=false
      })
      this.fetchData()

    },
    switchStatus(row){
      this.menuObject.id=row.id
      this.menuObject.status=row.status
      api.updateStatus(this.menuObject).then(response=>{
        this.menuObject.status===1?0:1
        this.$message({
          type:'success',
          message:'状态更新成功'
        })
        this.fetchData()
        alert(this.menuObject.status)
      })
    },

  }
}
</script>



